<template>
	<div class="main">
		<h1 ref="h1" v-if="show==0"></h1>
		<div v-for="(item,index) in aList" :key="index">
			<div v-if="show==item.id" v-html="item.one"></div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	export default{
		props:['show'],
		data(){
			return {
				aList:[
					{
						id:'1-1',
						one:'',
					},
					{
						id:'1-2',
						one:"22222",
					},
					{
						id:'1-3',
						one:"333333",
					},
					{
						id:'1-4',
						one:"333333",
					},
					{
						id:'1-5',
						one:"333333",
					},
					{
						id:'1-6',
						one:"",
					},
					{
						id:'4-1',
						one:''
					},
					{
						id:'4-2',
						one:''
					},
					{
						id:'5-1',
						one:''
					},
					{
						id:'5-2',
						one:''
					},
					
				],
			}
		},
		mounted() {
			this.ajax('/book/jsBase.txt',0)
			this.ajax('/book/vue.txt',6)
			this.ajax('/book/command.txt',7)
		},
 		methods:{
			ajax(url,index){
				axios.get(url)
				.then((res)=>{
					this.aList[index].one=res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.right{
		width: calc(100% - 200px);
		float: right;
		position: relative;
		>h1::before{
			content: '笔记是空的';
			width: 100%;
			height: 937px;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0,0,0,0.2);
			color: #f4f4f4;
			text-align: center;
			line-height: 905px;
		}
		>div{
			padding-left: 50px;
			h1{
				margin-bottom: 20px;
				margin-top: 20px;
				margin-left: 20px;
			}
			h2{
				padding-left: 40px;
				margin-top: 15px;
				margin-bottom: 15px;
			}
			h3{
				padding-left: 60px;
				margin-top: 10px;
				margin-bottom: 15px;
			}
			p{
				padding-left: 70px;
				font-size: 20px;
				margin-bottom: 10px;
			}
		}
	}
</style>
